<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- <p class="p">123123</p> -->
    <div id="app">
        <!-- <p ref="p" class="p1">{{count}}</p>
        <p ref="p" class="p2">{{count}}</p>
        <p ref="p" class="p3">{{count}}</p>
        <p ref="p" class="p4">{{count}}</p> -->

        <p v-for="n in 4" :key="n" ref="p" :class="'p'+n">{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
        <p ref="one"></p>
    </div>
</body>
<script>

    var app = new Vue({
        // el: "#app",
        data: {
            count: 1,
        },
        // methods: {},
        // computed: {},
        watch: {
            count: function (newVal, oldVal) {
                console.log("count发生了改变", newVal, oldVal);

                // Vue中如何获取页面中的元素?
                // 1. 通过传统的DOM方法获取  => 缺点:范围太大了, 获取元素的范围和当前挂载的元素毫无关系
                // var p = document.getElementsByClassName("p")[0];
                // console.log(p);

                // 2. 对应ref属性名获取元素
                // a. 给需要获取的元素绑定ref属性  
                // b. Vue在解析模版时,会对应ref属性的属性名将元素存储到Vue实例的$refs属性中
                // c. 通过Vue实例的$refs对应ref属性名获取元素 

                // 注意:
                // a. 默认情况下, 如果多个元素有相同的ref名,最后一个生效
                // b. 如果在v-for中使用ref属性, 会对应ref属性名将元素整合到数组中
                // c. ref属性  不仅可以用于获取原生dom元素,也可以用于获取组件实例

                console.log(this.$refs.p);

            }
        }
    });
    app.$mount("#app");

    console.log(app);


</script>

</html>